<template>
  <div class="dates-box">
    <div class="dates" v-for="(v, i) in formData[field]" :key="i">
      <!-- <el-select-v2
        v-if="v.type !== 'other'"
        v-model="v.days"
        :placeholder="placeholderSelect"
        filterable
        multiple
        clearable
        @change="changeSelect(i, v.days)"
        :options="v.options"
      ></el-select-v2> -->
      <el-select
        style="height: 32px"
        v-model="v.days"
        v-if="v.type !== 'other'"
        :placeholder="placeholderSelect"
        filterable
        multiple
        clearable
        collapse-tags
        collapse-tags-tooltip
        @change="changeSelect(i, v.days)"
      >
        <el-checkbox v-if="i === 0" v-model="STATE.checked" @change="selectAll" class="all-check">全选</el-checkbox>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :xiami="item.value"
          :tudou="v.days"
          :disabled="!v.days.includes(item.value) && STATE.publicData.includes(item.value)"
        />
        <!-- disabled: 不是当前下拉选中的&&别的下拉选中过这个 -->
      </el-select>
      <el-date-picker
        v-else
        v-model="v.days"
        placeholder="请选择日期"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <i
        v-if="(type === 'normal' && i !== 0) || ['special', 'holiday'].includes(type)"
        class="MC_iconfont MC_icon-shanchu2-xian"
        @click="delDate(i)"
      ></i>
      <div class="date-time">
        <div v-for="(item, index) in v.timePoint" :key="index" class="times">
          <el-time-picker
            v-model="item.period"
            placeholder="请选择时间"
            is-range
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <el-tooltip :show-after="500" v-if="index === 0" effect="dark" :content="tip" placement="top-start">
            <i class="MC_iconfont MC_icon-tianjia-yuan-xian" @click="addTime(i)"></i>
          </el-tooltip>
          <i v-else class="MC_iconfont MC_icon-shanchu2-xian" @click="delTime(i, index)"></i>
          <el-input
            v-if="['special', 'holiday'].includes(type)"
            v-model.trim="item.note"
            placeholder="请添加备注"
            clearable
            class="memo"
          ></el-input>
        </div>
      </div>
    </div>
    <span v-if="type === 'normal'" class="add-btn" @click="addDate(i, 'legal')"
      ><i class="MC_iconfont MC_icon-tianjia-xian"></i>新建工作日</span
    >
    <template v-else>
      <span class="add-btn" @click="addDate(i, 'legal')"
        ><i class="MC_iconfont MC_icon-tianjia-xian"></i
        >{{ type === 'special' ? '新建法定节假日调休' : '新建法定节假日' }}</span
      >
      <span class="add-btn" @click="addDate(i, 'other')"><i class="MC_iconfont MC_icon-tianjia-xian"></i>其他日期</span>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive } from 'vue'

export default defineComponent({
  name: 'SetTime',
  components: {},
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    field: {
      type: String,
      default: ''
    },
    placeholderSelect: {
      type: String,
      default: '请选择'
    },
    type: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  emits: ['onAddTime', 'update:form', 'onDelTime', 'onAddDate', 'onDelDate'],
  setup(props, { emit }) {
    const formData = computed({
      get: () => props.form,
      set: (val) => emit('update:form', val)
    })
    const STATE = reactive({
      publicData: [],
      checked: false // 全选
    })
    const visible = ref(false)

    // 参数i--formData[field]
    const addTime = (i: number) => {
      const data = {
        i,
        field: props.field
      }
      emit('onAddTime', data)
    }

    // i--formData[field]   index--v.timePoint
    const delTime = (i: number, index: number) => {
      const data = {
        i,
        index,
        field: props.field
      }
      emit('onDelTime', data)
    }

    const addDate = (i: number, type?: string) => {
      emit('onAddDate', { i, field: props.field, type })
    }

    // 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除）
    const changeSelect = (i: number, data: any) => {
      if (i == 0) {
        if (data.length === props.options.length) {
          STATE.checked = true
        } else {
          STATE.checked = false
        }
      }
      setPublicData()
    }

    // 修改当前选中的所有数据
    const setPublicData = () => {
      let publicArr: any = []
      props.form[props.field].forEach((item: any) => {
        publicArr = [...publicArr, ...item.days]
      })
      STATE.publicData = publicArr
    }

    // 全选
    const selectAll = () => {
      if (STATE.checked) {
        // 选中
        props.form[props.field].forEach((val: any, idx: number) => {
          if (idx == 0) {
            props.form[props.field][idx].days = [] // 清空数据
            props.options.forEach((v: any) => {
              props.form[props.field][idx].days.push(v.value)
            })
          } else {
            props.form[props.field][idx].days = []
          }
        })
        STATE.publicData = props.form[props.field][0].days
      } else {
        props.form[props.field][0].days = []
        STATE.publicData = []
      }
    }

    const delDate = (i: number) => {
      const data = {
        i,
        field: props.field
      }
      emit('onDelDate', data)
      setPublicData()
    }

    return { formData, addTime, delTime, addDate, delDate, changeSelect, visible, STATE, setPublicData, selectAll }
  }
})
</script>

<style lang="stylus" scoped>
.el-checkbox {
  width 100%
  :deep(.el-checkbox__input) {
    display: none
  }
  :deep(.el-checkbox__label) {
    margin-left: 12px
  }
}
.dates-box {
  width: 100%;

  .dates {
    width: 100%;
    box-sizing: border-box;
    background: var(--mc-gray2-color);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;

    .el-select {
      flex: 1;
      :deep(.el-select__tags) {
        max-width: 250px !important
      }
    }

    .date-time {
      margin-left: 16px;
    }

    .MC_icon-shanchu2-xian {
      color: var(--mc-main-color);
      margin-left: 8px;
    }

    .times {
      display: flex;
      margin-top: 8px;

      .MC_iconfont {
        margin-left: 12px;
      }

      .MC_icon-tianjia-yuan-xian {
        color: var(--mc-main-color);
      }

      .MC_icon-shanchu2-xian {
        color: rgba(0, 0, 0, 0.38);
      }

      .memo {
        margin-left: 10px;
        width: 200px;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }
}

.add-btn {
  color: var(--mc-main-color);
  margin-top: 8px;
  cursor: pointer;
  margin-right: 30px;

  .MC_icon-tianjia-xian {
    margin-right: 8px;
  }
}
</style>
